<template>
  <div class="mod-prod-analysis-home">
    <!-- <p class="strong">严正声明：</p>
    <p class="content">沙鲜送商城专业版并非一个开源软件，作者保留全部的权利。 擅自窃用，即属严重侵权行为，与盗窃无异。产生的一切任何后果责任由侵权者自负。
    擅自窃用，必将追究法律责任！！！</p>-->

    <!-- 数据 -->

    <!-- 实时概况板块 -->
    <div class="realtime-situation">
      <!-- 栏目标题行 -->
      <div class="title-line">
        <!-- 左边 -->
        <div class="title-left">
          <p class="blue-vertical"></p>
          <span class="title-txt">{{ $t("dataAnaly.ovelProduvervi") }}</span>
        </div>
        <!-- 右边 -->
        <div class="title-right">
          <el-select
            v-model="dateValue"
            @change="setDateRange(dateValue)"
            style="width: 100px"
            size="mini"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span class="title-time" v-if="dateValue === 2 || dateValue === 3"
            >{{ this.dateRange[0] }}{{ $t("date.tip")
            }}{{ this.dateRange[1] }}</span
          >
        </div>
        <div class="title-picker">
          <el-date-picker
            size="mini"
            style="width: 150px; margin-top: 7px"
            v-if="dateValue === 4"
            v-model="dateRange[0]"
            @change="handleRangeFour()"
            type="date"
            :placeholder="this.$i18n.t('admin.seleData')"
            :picker-options="PickerOptions"
          ></el-date-picker>
        </div>
        <div class="title-picker">
          <el-date-picker
            size="mini"
            style="width: 150px; margin-top: 7px"
            v-if="dateValue === 5"
            v-model="preMonth"
            @change="handleMonth()"
            type="month"
            :placeholder="this.$i18n.t('dataAnaly.selectMonth')"
            :picker-options="monthPickerOptions"
          ></el-date-picker>
        </div>
      </div>
      <!-- /栏目标题行 -->
      <!-- 商品概况列表 -->
      <div class="item-list">
        <prod-survey-table :prodData="prodData"></prod-survey-table>
      </div>
      <!-- /商品概况列表 -->
    </div>
    <!-- /实时概况板块 -->
    <!-- 说明文字板块 -->
    <div>
      <div class="title-text-info">
        <span style="padding-left: 9px; padding-top: 9px">{{ $t("dataAnaly.orderTip1") }}</span>
        <br />
        <div style="padding-left: 9px; padding-top: 9px">{{ $t("dataAnaly.orderTip2") }}</div>
      </div>
      <div class="title-line">
        <!-- <span class="title-txt">2.若有其他疑问，可查看数据常见问题。</span> -->
      </div>
    </div>
    <!-- /说明文字板块 -->
    <!-- 整体看板 -->
    <div class="whole-plate">
      <!-- 栏目标题行 -->
      <div class="title-line">
        <div class="title-left">
          <p class="blue-vertical"></p>
          <span class="title-txt">{{
            $t("dataAnaly.commodityTrendAnalysis")
          }}</span>
        </div>
        <div class="title-right">
          <el-select
            v-model="dateValue3"
            @change="setDateRange3(dateValue3)"
            style="width: 100px"
            size="mini"
          >
            <el-option
              v-for="item in dateOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span class="title-time" v-if="dateValue3 === 2 || dateValue3 === 3"
            >{{ dateRange3[0] }} - {{ dateRange3[1] }}</span
          >
          <div class="title-picker">
            <el-date-picker
              size="mini"
              style="width: 150px"
              v-if="dateValue3 === 5"
              @change="handleMonth3()"
              v-model="preMonth3"
              type="month"
              :placeholder="this.$i18n.t('date.tip')"
              :picker-options="monthPickerOptions"
            ></el-date-picker>
          </div>
          <div>
            <el-popover placement="right" width="500" trigger="click">
              <el-form :model="customIndexForm" class="form-inline">
                <el-form-item
                  :label="this.$i18n.t('dataAnaly.commodityOverview') + ':'"
                >
                  <el-checkbox-group v-model="customIndexForm.prodSurvey">
                    <el-checkbox
                      :label="this.$i18n.t('dataAnaly.numberOfProductsOnShelf')"
                      name="prodSurvey"
                    ></el-checkbox>
                    <el-checkbox
                      :label="this.$i18n.t('dataAnaly.numberOfProductsVisited')"
                      name="prodSurvey"
                    ></el-checkbox>
                    <el-checkbox
                      :label="this.$i18n.t('dataAnaly.numberOfProductsForSale')"
                      name="prodSurvey"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item
                  :label="this.$i18n.t('dataAnaly.commodityFlow') + ':'"
                >
                  <el-checkbox-group v-model="customIndexForm.prodFlow">
                    <el-checkbox
                      :checked="true"
                      :label="this.$i18n.t('dataAnaly.shareVisits')"
                      name="prodSurvey"
                    ></el-checkbox>
                    <el-checkbox
                      :checked="true"
                      :label="this.$i18n.t('dataAnaly.productViews')"
                      name="prodSurvey"
                    ></el-checkbox>
                    <el-checkbox
                      :checked="true"
                      :label="this.$i18n.t('dataAnaly.commodityVisitors')"
                      name="prodSurvey"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item
                  :label="this.$i18n.t('dataAnaly.shareVisits') + ':'"
                >
                  <el-checkbox-group v-model="customIndexForm.prodTransForm">
                    <el-checkbox
                      :label="this.$i18n.t('dataAnaly.numberOfCases')"
                      name="prodSurvey"
                    ></el-checkbox>
                    <el-checkbox
                      :label="this.$i18n.t('dataAnaly.orderNumber')"
                      name="prodSurvey"
                    ></el-checkbox>
                    <el-checkbox
                      :label="this.$i18n.t('dataAnaly.numberOfPayment')"
                      name="prodSurvey"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <span id="maxSelectSpan"
                  >{{ $t("dataAnaly.mostChoices") }}{{ maxSelectNum
                  }}{{ $t("dataAnaly.item") }}</span
                >
                <span
                  >{{ $t("dataAnaly.chosen") }} {{ selectNum }}
                  {{ $t("dataAnaly.item") }}</span
                >
              </el-form>
              <el-button size="mini" slot="reference">{{
                $t("dataAnaly.selectTheIndicatorToDisplay")
              }}</el-button>
            </el-popover>
          </div>
        </div>
      </div>
      <!-- /栏目标题行 -->
      <!-- 图表 -->
      <div
        class="realtime-chart-box"
        id="time-survey"
        style="width: 100%; height: 300px"
      ></div>

      <!-- /图表 -->
    </div>
    <!-- /整体看板 -->

    <!-- 商品排行整体看板 -->
    <div class="refund-plate">
      <!-- 栏目标题行 -->
      <div class="title-line">
        <div class="title-left">
          <p class="blue-vertical"></p>
          <span class="title-txt">{{ $t("dataAnaly.commodityRanking") }}</span>
        </div>
        <!-- <el-form :inline="true" :model="dateChoose" class="form-inline"> -->

        <!-- <el-form-item>
            <p class="blue-vertical"></p>
            <span class="title-txt">商品排行榜</span>
        </el-form-item>-->
        <!-- <el-form-item> -->
        <div class="title-right">
          <el-select
            v-model="dateValue2"
            @change="setDateRange2(dateValue2)"
            style="width: 100px"
            size="mini"
          >
            <el-option
              v-for="item in dateOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span class="title-time" v-if="dateValue2 === 2 || dateValue2 === 3"
            >{{ dateRange2[0] }}{{ $t("date.tip") }}{{ dateRange2[1] }}</span
          >
          <div class="title-picker">
            <el-date-picker
              size="mini"
              style="width: 150px"
              v-if="dateValue2 === 5"
              @change="handleMonth2()"
              v-model="preMonth2"
              type="month"
              :placeholder="this.$i18n.t('dataAnaly.selectMonth')"
              :picker-options="monthPickerOptions"
            ></el-date-picker>
          </div>
        </div>
        <!-- </el-form-item> -->
        <!-- </el-form> -->
      </div>
      <!-- /栏目标题行 -->

      <!-- 下 -->
      <div class="ranking-box">
        <div class="ranking-left">
          <div class="ranking-title">
            {{ $t("dataAnaly.paymentAmountTOP") }}
          </div>
          <table class="table">
            <tr class="table-tit">
              <td class="table-tit-item ref">{{ $t("home.rank") }}</td>
              <td>{{ $t("product.prodName") }}</td>
              <td class="table-tit-item ref">
                {{ $t("dataAnaly.paymentAmount") }}
              </td>
              <!-- <td class="table-tit-item ref">操作</td> -->
            </tr>
            <tr v-for="(item, index) in payAmountTopData" :key="index">
              <td>{{ item[0] }}</td>
              <!-- <td>{{item[3]}}</td> -->
              <td class="prod-image">
                <img :src="item[3]" width="60" height="60" />
                <!-- <span class="prod-name">{{item[2]}}</span> -->
                <span class="name" style="width: 300px">{{ item[2] }}</span>
              </td>
              <!-- <td>{{item[2]}}</td> -->
              <td>{{ item[4] }}</td>
            </tr>
          </table>
        </div>
        <div class="ranking-right">
          <div class="ranking-title">
            {{ $t("dataAnaly.numberOfVisitorsTOP") }}
          </div>
          <table class="table">
            <tr class="table-tit">
              <td class="table-tit-item ranks">{{ $t("home.rank") }}</td>
              <td>{{ $t("product.prodName") }}</td>
              <td class="table-tit-item refs">
                {{ $t("dataAnaly.numberOfVisitors") }}
              </td>
              <td class="table-tit-item prop">
                {{ $t("dataAnaly.visitToPayConversionRate") }}
              </td>
              <!-- <td class="table-tit-item refs">操作</td> -->
            </tr>
            <tr
              v-for="(item, index) in visitorTopData"
              :key="index"
              class="table-tit"
            >
              <td>{{ item[0] }}</td>
              <!-- <td>{{item[1]}}</td>
              <td>{{item[2]}}</td>-->
              <td class="prod-image">
                <img :src="item[3]" width="60" height="60" />
                <span class="name" style="width: 300px">{{ item[2] }}</span>
              </td>
              <td>{{ item[4] }}</td>
              <td>{{ item[5] }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <!-- /商品排行整体看板 -->
  </div>
</template>

<script>
import ProdSurveyTable from './prod-survey-table'
import Big from 'big.js'
import moment from 'moment'

export default {
  data () {
    return {
      value: [0, 1],
      sumPayActualTotal: 0.00,
      dataForm: {},
      dateChoose: {}, // 时间选择
      prodData: {
        dateValue: 2, // 商品整体概况,时间选择状态
        data: {
          onSale: 0, // 在架商品数
          visitedProd: 0, // 被访问商品数
          dynamicSale: 0, // 动销商品数
          expose: 0, // 商品曝光数
          browse: 0, // 商品浏览量
          visitor: 0, // 商品访客数
          addCart: 0, // 加购件数
          orderNum: 0, // 下单件数
          payNum: 0 // 支付件数
        }, // 商品整体概况数据
        lastData: {},
        rate: {}
      }, // 商品 概况列表
      nowActualTotal: [],
      payYesterdayActualTotal: [],
      dataArray: [],
      timeArray: [],
      nowDate: null,
      dataInfo: {},
      rate: [],
      refundRateInfo: [],
      refundRankForActualTotal: [],
      refundRankForCause: [],
      dateValue: 2,
      dateValue2: 2,
      dateValue3: 2,
      PickerOptions: {
        disabledDate (time) {
          var date = moment().add(-1, 'days').startOf('days')
          return (
            time.getTime() > date.valueOf()
          )
        }
      },
      monthPickerOptions: {
        disabledDate (time) {
          let month1 = moment().startOf('month')
          return (
            time.getTime() > month1.valueOf()
          )
        }
      },
      dateOptions: [
        {
          label: this.$i18n.t('dataAnaly.nearly7Days'),
          value: 2
        },
        {
          label: this.$i18n.t('dataAnaly.nearly30Days'),
          value: 3
        },
        {
          label: this.$i18n.t('dataAnaly.natureDay'),
          value: 4
        },
        {
          label: this.$i18n.t('dataAnaly.naturalMoon'),
          value: 5
        }
      ],
      dateOptions2: [
        {
          label: this.$i18n.t('dataAnaly.nearly7Days'),
          value: 2
        },
        {
          label: this.$i18n.t('dataAnaly.nearly30Days'),
          value: 3
        },
        {
          label: this.$i18n.t('dataAnaly.naturalMoon'),
          value: 5
        }
      ],
      dateRange: [],
      dateRange2: [], // 展示的时间参数
      dateRange2Param: [], // 要传递的时间参数
      dateRange3: [], // 展示的时间参数
      dateRange4Param: [], // 要传递的时间参数
      preMonth: '', // 前一个月
      preMonth2: '', // 前一个月
      preMonth3: '', // 前一个月
      dateRange1: [], // 商品整体概况的时间选择范围
      payAmountTopData: [], // 支付金额TOP
      visitorTopData: [], // 访问top
      customIndexForm: {
        prodSurvey: [], // '在架商品数', '被访问商品数', '动销商品数'
        prodFlow: [],
        prodTransForm: []
      },
      selectNum: 0,
      maxSelectNum: 4, // 最多选择几项
      sumData: [],
      dateArr: [], // 趋势图时间数组
      seriesDataArr: [], // 所有数据
      seriesControlDataArr: [] // 控制显示的数据
    }
  },
  mounted () {
    this.dateValue = 2
    this.setDateRange(2)
    // this.getProdSurvey()
    // this.setDateRange(2)
    this.setDateRange2(2)
    this.setDateRange3(2)
  },
  updated () {
    // this.getpayInfo()
  },
  components: {
    ProdSurveyTable
  },
  watch: {
    'customIndexForm.prodSurvey' () {
      this.selectNum = this.customIndexForm.prodSurvey.length + this.customIndexForm.prodFlow.length + this.customIndexForm.prodTransForm.length
      // console.log(this.customIndexForm.prodSurvey)
      this.sumData = []
      this.sumData = this.sumData.concat(this.customIndexForm.prodSurvey).concat(this.customIndexForm.prodFlow).concat(this.customIndexForm.prodTransForm)
      // console.log(this.sumData)
      var checks = document.getElementsByName('prodSurvey')
      var span = document.getElementById('maxSelectSpan')
      checks.forEach(i => {
        if (this.selectNum >= this.maxSelectNum) {
          this.textShare(span, 'red')
          if (!i.checked) {
            i.setAttribute('disabled', 'true')
          }
        }
      })
      if (this.selectNum < this.maxSelectNum) {
        this.textShare(span, 'black')
        checks.forEach(i => {
          i.removeAttribute('disabled')
        })
      }
    },
    'customIndexForm.prodFlow' () {
      this.selectNum = this.customIndexForm.prodSurvey.length + this.customIndexForm.prodFlow.length + this.customIndexForm.prodTransForm.length
      this.sumData = []
      this.sumData = this.sumData.concat(this.customIndexForm.prodSurvey).concat(this.customIndexForm.prodFlow).concat(this.customIndexForm.prodTransForm)
      // console.log(this.sumData)
      var checks = document.getElementsByName('prodSurvey')
      var span = document.getElementById('maxSelectSpan')
      checks.forEach(i => {
        if (this.selectNum >= this.maxSelectNum) {
          this.textShare(span, 'red')
          if (!i.checked) {
            i.setAttribute('disabled', 'true')
          }
        }
      })
      if (this.selectNum < this.maxSelectNum) {
        this.textShare(span, 'black')
        checks.forEach(i => {
          i.removeAttribute('disabled')
        })
      }
    },
    'customIndexForm.prodTransForm' () {
      this.selectNum = this.customIndexForm.prodSurvey.length + this.customIndexForm.prodFlow.length + this.customIndexForm.prodTransForm.length
      this.sumData = []
      this.sumData = this.sumData.concat(this.customIndexForm.prodSurvey).concat(this.customIndexForm.prodFlow).concat(this.customIndexForm.prodTransForm)
      // console.log(this.sumData)
      var checks = document.getElementsByName('prodSurvey')
      var span = document.getElementById('maxSelectSpan')
      checks.forEach(i => {
        if (this.selectNum >= this.maxSelectNum) {
          this.textShare(span, 'red')
          if (!i.checked) {
            i.setAttribute('disabled', 'true')
          }
        }
      })
      if (this.selectNum < this.maxSelectNum) {
        this.textShare(span, 'black')
        checks.forEach(i => {
          i.removeAttribute('disabled')
        })
      }
    },
    'sumData' () {
      this.controlTrendDataShow()
      // this.getRealTimechartData()
    }
    // 'seriesControlDataArr' () {
    //   this.getRealTimechartData()
    // }
  },
  methods: {
    /**
     * 刷新时间
     */
    flushDateTime () {
      const date = new Date()
      this.nowDate = moment(date).format('LL')
      this.dateRange1 = [moment(date).format('L') + ' 00:00:00', this.nowDate]
      this.getProdSurvey()
    },
    /**
     * 1:今天 2: 近七天 3:近30天 4:昨天 5:自然月(前一个月如当前月为7月，自然月为6月)
     */
    setDateRange (val) {
      var startDay = null
      var endDay = null
      this.prodData.dateValue = val
      if (val === 1) {
        startDay = 0
        endDay = 0
        this.dateRange1 = [moment().format('L') + ' 00:00:00', this.nowDate]
        this.getProdSurvey()
        return
      } else if (val === 2) {
        startDay = -7
        endDay = -1
      } else if (val === 3) {
        startDay = -30
        endDay = -1
      } else if (val === 4) {
        startDay = -1
        endDay = 0
      } else if (val === 5) {
        this.preMonth = this.getPreMonth()
        this.getProdSurvey()
        return
      } else {
        return
      }
      // 开始时间
      var startTime = moment().add(startDay, 'days').startOf('days')
      // 结束时间
      var endTime = moment().add(endDay, 'days').endOf('days')
      this.dateRange = [startTime.format('L'), endTime.format('L')]
      this.dateRange1 = [startTime.format('LL'), endTime.format('LL')]
      this.getProdSurvey()
    },
    /**
     * 2: 近七天 3:近30天 5:自然月(前一个月如当前月为7月，自然月为6月)
     */
    setDateRange2 (val) {
      var startDay = null
      var endDay = null
      if (val === 2) {
        startDay = -7
        endDay = -1
      } else if (val === 3) {
        startDay = -30
        endDay = -1
      } else if (val === 5) {
        this.preMonth2 = this.getPreMonth()
        this.getPayAmountTop()
        return
      } else {
        return
      }
      // 开始时间
      var startTime = moment().add(startDay, 'days').startOf('days')
      // 结束时间
      var endTime = moment().add(endDay, 'days').endOf('days')
      this.dateRange2 = [startTime.format('L'), endTime.format('L')]
      this.dateRange2Param = [startTime.format('LL'), endTime.format('LL')]
      this.getPayAmountTop()
    },
    /**
     * 2: 近七天 3:近30天 5:自然月(前一个月如当前月为7月，自然月为6月)
     */
    setDateRange3 (val) {
      var startDay = null
      var endDay = null
      if (val === 2) {
        startDay = -7
        endDay = -1
      } else if (val === 3) {
        startDay = -30
        endDay = -1
      } else if (val === 5) {
        this.preMonth3 = this.getPreMonth()
        this.getProdTrendAnalysis()
        return
      } else {
        return
      }
      // 开始时间
      var startTime = moment().add(startDay, 'days').startOf('days')
      // 结束时间
      var endTime = moment().add(endDay, 'days').endOf('days')
      this.dateRange3 = [startTime.format('L'), endTime.format('L')]
      this.dateRange3Param = [startTime.format('LL'), endTime.format('LL')]
      this.getProdTrendAnalysis()
      // console.log(this.dateRange3)
    },
    /**
     /**
     * 获取前一个月的时间
     */
    getPreMonth () {
      var date = moment().add(-1, 'month').startOf('month')
      // 上一个月的开始时间
      var timeStar = moment(date).startOf('month').format('LL')
      // 上一个月的结束时间
      var timeEnd = moment(date).endOf('month').format('LL')
      console.log('a', [timeStar, timeEnd])
      this.dateRange1 = [timeStar, timeEnd]
      this.dateRange2Param = [timeStar, timeEnd]
      this.dateRange3Param = [timeStar, timeEnd]
      console.log('a', this.dateRange1)
      console.log('ab', this.dateRange2Param)
      console.log('abc', this.dateRange3Param)
      return moment(date).format('L')
    },
    getMonthToStr (date) {
      let start = moment(date).startOf('month').format('LL')
      let end = moment(date).endOf('month').format('LL')
      return [start, end]
    },
    /**
     * 当dateRange == 4 监听dateRange[0]的变化
     */
    handleRangeFour () {
      var date = this.dateRange[0]
      if (date) {
        var start = moment(date).startOf('days').format('LL')
        var end = moment(date).endOf('days').format('LL')
        this.dateRange1 = [start, end]
      } else {
        this.dateRange1 = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
      }
      this.getProdSurvey()
    },
    /**
     * 当dateRange == 5 监听dateRange[0]的变化
     */
    handleMonth () {
      if (this.preMonth) {
        this.dateRange1 = this.getMonthToStr(this.preMonth)
      } else {
        this.dateRange1 = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
      }
      this.getProdSurvey()
    },
    handleMonth2 () {
      if (this.preMonth2) {
        this.dateRange2Param = this.getMonthToStr(this.preMonth2)
      } else {
        this.dateRange2Param = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
      }
      this.getPayAmountTop()
    },
    handleMonth3 () {
      if (this.preMonth3) {
        this.dateRange3Param = this.getMonthToStr(this.preMonth3)
      } else {
        this.dateRange3Param = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
      }
      this.getProdTrendAnalysis()
    },
    /**
     * 获取商品概况数据
     */
    getProdSurvey () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/multishop/prodAnalysis/getProdSurvey'),
        method: 'get',
        params: this.$http.adornParams(
          {
            shopId: null,
            dateType: this.dateValue,
            startTime: this.dateRange1[0],
            endTime: this.dateRange1[1]
          }
        )
      }).then(({ data }) => {
        if (data) {
          this.prodData.data = data.data
          this.prodData.lastData = data.lastData
          this.prodData.rate = data.rate
          this.dataListLoading = false
        }
      })
    },
    /**
     * 商品趋势分析数据
     */
    getProdTrendAnalysis () {
      this.$http({
        url: this.$http.adornUrl('/multishop/prodAnalysis/getProdTrendAnalysis'),
        method: 'get',
        params: this.$http.adornParams(
          {
            dateType: this.dateValue3,
            startTime: this.dateRange3Param[0],
            endTime: this.dateRange3Param[1]
          }
        )
      }).then(({ data }) => {
        if (data) {
          this.dateArr = []
          this.seriesDataArr = []
          let obj1 = this.initObj(this.$i18n.t('dataAnaly.numberOfProductsOnShelf'))
          let obj2 = this.initObj(this.$i18n.t('dataAnaly.numberOfProductsVisited'))
          let obj3 = this.initObj(this.$i18n.t('dataAnaly.numberOfProductsForSale'))
          let obj4 = this.initObj(this.$i18n.t('dataAnaly.productViews'))
          let obj5 = this.initObj(this.$i18n.t('dataAnaly.commodityVisitors'))
          let obj6 = this.initObj(this.$i18n.t('dataAnaly.shareVisits'))
          let obj7 = this.initObj(this.$i18n.t('dataAnaly.numberOfCases'))
          let obj8 = this.initObj(this.$i18n.t('dataAnaly.orderNumber'))
          let obj9 = this.initObj(this.$i18n.t('dataAnaly.numberOfPayment'))
          data.forEach(i => {
            console.log('i.browse', i.browse)
            this.dateArr.push(i.currentDay)
            obj1.data.push(i.onSale)
            obj2.data.push(i.visitedProd)
            obj3.data.push(i.dynamicSale)
            obj4.data.push(i.expose)
            obj5.data.push(i.browse)
            obj6.data.push(i.visitor)
            obj7.data.push(i.addCart)
            obj8.data.push(i.orderNum)
            obj9.data.push(i.payNum)
          })
          this.seriesDataArr.push(obj1)
          this.seriesDataArr.push(obj2)
          this.seriesDataArr.push(obj3)
          this.seriesDataArr.push(obj4)
          this.seriesDataArr.push(obj5)
          this.seriesDataArr.push(obj6)
          this.seriesDataArr.push(obj7)
          this.seriesDataArr.push(obj8)
          this.seriesDataArr.push(obj9)
        }
        // console.log(this.sumData)
        // console.log(this.seriesDataArr)
        // this.customIndexForm.prodSurvey = ['在架商品数', '被访问商品数', '动销商品数'] // '在架商品数', '被访问商品数', '动销商品数'
        this.controlTrendDataShow()
        this.getRealTimechartData()
      })
    },
    /**
     * 控制趋势图的数据显示
     */
    controlTrendDataShow () {
      //
      this.seriesControlDataArr = []
      var length = 0
      this.sumData.forEach(i => {
        length = length + 1
        this.seriesDataArr.forEach(element => {
          if (i === element.name) {
            this.seriesControlDataArr.push(element)
          }
        })
      })
      if (this.sumData.length < 1) {
        this.seriesControlDataArr = []
      }
      // console.log(this.seriesControlDataArr)
      if (length === this.sumData.length) {
        this.getRealTimechartData()
      }
      // console.log(this.seriesControlDataArr)
      // this.getRealTimechartData()
    },
    /**
     * 初始化一个obj
     */
    initObj (name) {
      let obj = {}
      obj.name = name
      obj.type = 'line'
      obj.stack = this.$i18n.t('home.totals')
      obj.data = []
      return obj
    },
    /**
     * 商品趋势分析表
     */
    getRealTimechartData () {
      // console.log(this.seriesControlDataArr)
      const myChart = this.$echarts.init(document.getElementById('time-survey'), 'walden')
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.sumData
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        // x轴的颜色和宽度

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateArr,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false }
        },
        series: this.seriesControlDataArr
      }
      myChart.setOption(option, true)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    /**
     * 获取支付金额TOP
     */
    getPayAmountTop () {
      this.payAmountTopData = []
      this.visitorTopData = []
      this.$http({
        url: this.$http.adornUrl('/multishop/prodAnalysis/getPayAmountTop'),
        method: 'get',
        params: this.$http.adornParams(
          {
            current: 1,
            size: 6,
            dateType: this.dateValue2,
            startTime: this.dateRange2Param[0],
            endTime: this.dateRange2Param[1]
          }
        )
      }).then(({ data }) => {
        if (data) {
          // this.payAmountTopData = data.payAmounts
          // this.visitorTopData = data.visitors
          if (data.payAmounts) {
            for (let index = 0; index < data.payAmounts.length; index++) {
              const i = data.payAmounts[index]
              console.log(i)
              var payAmountArr = []
              payAmountArr.push(index + 1)
              payAmountArr.push(i.prodId)
              payAmountArr.push(i.prodName)
              payAmountArr.push(i.pic)
              payAmountArr.push(i.payAmount)
              this.payAmountTopData.push(payAmountArr)
            }
          }
          if (data.visitors) {
            for (let index = 0; index < data.visitors.length; index++) {
              const e = data.visitors[index]
              var visitor = []
              visitor.push(index + 1)
              visitor.push(e.prodId)
              visitor.push(e.prodName)
              visitor.push(e.pic)
              visitor.push(e.visitorNum)
              if (e.visitorToPayRate !== null) {
                if (e.visitorToPayRate <= 0) {
                  visitor.push(0 + '%')
                } else {
                  Big.DP = 2
                  var rate = new Big(e.visitorToPayRate).times(100).toFixed(2)
                  visitor.push(rate + '%')
                }
              }

              this.visitorTopData.push(visitor)
            }
          }
          // console.log(this.payAmountTopData)
          // console.log(this.visitorTopData)
        }
      })
    },
    /**
     * 文字效果
     */
    textShare (div, color) {
      // 文字跳动
      // var timer = null
      // var i = 0
      // clearInterval(timer)
      // timer = setInterval(function () {
      //   div.style.display = i++ % 2 ? 'none' : 'block'
      //   i > 6 && (clearInterval(timer))
      // }, 80)
      div.style.color = color
    }
  }
}
</script>

<style lang="scss">
.mod-prod-analysis-home {
  // font-size: 1em;
  // line-height: 2em;
  // .strong {
  //   margin: 0;
  //   font-size: 17px;
  //   font-weight: bold;
  //   text-align: center;
  //   margin-bottom: 0.5em;
  // }
  // .content {
  //   font-size: 16px;
  //   padding: 0 30px;
  // }

  // 栏目标题行
  .title-line {
    background: #f8f8f8;
    padding: 12px;
    font-size: 12px;
    line-height: 1em;
    display: flex;
    justify-content: space-between;
  }
  .title-text-info {
    padding-top: 9px;
    background: #f8f8f8;
  }
  .title-left {
    text-align: left;
    margin-top: 0.5em;
    flex: 1;
  }
  .title-right {
    text-align: right;
    display: flex;
    align-items: center;
  }
  .title-picker {
    display: inline;
  }
  .blue-vertical {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: #155bd4;
    margin-right: 0.5em;
    vertical-align: middle;
  }
  .title-txt {
    color: #000;
    font-weight: normal;
    margin-right: 1em;
    vertical-align: middle;
  }
  .title-time {
    color: #999999;
    vertical-align: middle;
    display: inline-block;
    padding: 0 10px;
  }

  .realtime {
    display: flex;
    margin-top: 40px;
    margin-left: 20px;
    padding: 0;
  }

  /**
    实时概况
     */
  // .realtime-situation {
  //   // margin-bottom: 40px;
  // }

  /**
    整体看板
     */
  .whole-plate {
    margin: 20px 0 30px;
    .related-income {
      margin: 30px 0 0 20px;
      display: flex;
      flex-wrap: wrap;
    }
    .related-income-item {
      flex: 1;
    }
    .item-tit {
      margin-bottom: 15px;
    }
    .item-num {
      height: 24px;
      line-height: 24px;
    }
    .item-num-price {
      font-size: 18px;
      font-weight: 700;
    }
    .item-num a {
      color: #155bd4;
      text-decoration: none;
    }
    .integral-plate {
      margin-top: 15px;
    }
  }

  /**
    退款看板
     */
  .refund-plate {
    //  上
    .refund-chart-box {
      display: flex;
      width: 100%;
      margin-top: 15px;
      .successed-refund,
      .refund-rate-box {
        display: flex;
        flex-direction: column;
        background: #fbfbfb;
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
      }
      .successed-refund {
        margin-right: 10px;
      }
      .refund-chart-msg {
        margin-bottom: 25px;
      }
      .msg-tit {
        font-size: 15px;
        margin-bottom: 15px;
      }
      .msg-price {
        margin: 6px 0;
        line-height: 26px;
        padding: 0;
        font-size: 24px;
        font-weight: bold;
        line-height: 1em;
      }
      .msg-txt-p {
        width: 146px;
      }
      .compare {
        color: #9b9b9b;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        padding: 5px;
      }
      .compare-left {
        margin-right: 10px;
        white-space: nowrap;
      }
    }
    // 下
    .ranking-box {
      margin-top: 10px;
      display: flex;
      width: 100%;
      .prod-name {
        width: 40px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .ranking-left,
      .ranking-right {
        display: flex;
        flex-direction: column;
        background: #fbfbfb;
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
      }
      .ranking-left {
        margin-right: 10px;
      }
      .ranking-title {
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
      }
      .table {
        width: 100%;
        border: none;
        tr {
          border: none;
          height: 3em;
          line-height: 3em;
          background: #fbfbfb;
        }
        td {
          border: none;
        }
        .prod-image {
          display: flex;
          align-items: center;
        }
        .prod-image .name {
          margin-left: 10px;
          line-height: 20px;
          color: #606266;
          word-break: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .table-tit-item {
          color: #999;
          text-align: left;
        }
        .rank {
          width: 15%;
        }
        .prod {
          width: 50%;
        }
        .ref {
          width: 20%;
        }
        .ranks {
          width: 12%;
        }
        .prods {
          width: 40%;
        }
        .refs {
          width: 10%;
        }
        .prop {
          width: 18%;
          // text-align: center;
        }
      }
      .no-data {
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 14px;
        color: #999;
      }
    }
  }
}
</style>

